<template>
  <div>
    <div style="margin: 15px auto; width: 60%;" class="searchBar">
      <el-input v-model="input3" placeholder="搜索职位" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
    </div>
    <div>
      <a-row>
        <a-col v-for="item in jobs" :key="item.jobId" :span="12">
          <a-card style="width: 550px; margin-top: 10px;" @click="toEmployeeInfo(item.jobId)">
            <div style="position: relative; float: left">
              <span style="font-size: 20px; color: chocolate;">{{ item.jobName }}</span>
              <span style="margin-left: 10px; color: chocolate;"><i class="iconfont icon-location" />[{{ item.company.companyArea }}·{{ item.company.companyAddress }}]</span>
              <br>
              <div>
                <span>发布时间</span>
                <el-divider direction="vertical" />
                <span>{{ item.jobSalary }}</span>
                <el-divider direction="vertical" />
                <span>{{ item.jobAcademic }}</span>
                <br>
                <span>
                  <el-tag>{{ item.jobWelfare }}</el-tag>
                </span>
              </div>

            </div>
            <div style="float: bottom; float: left" />

            <div style="float: right;">
              <span style="margin-right: 10px; font-size: 16px; font-weight: bold;">{{ item.company.companyName }}</span>
              <a-avatar :size="45" icon="user" shape="square" :src="item.company.companyLogo" />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Employee',
  data() {
    return {
      jobs: [],
      input3: ''
    }
  },
  created() {
    const _this = this
    this.$http.get('job/selectAllJobWithName').then(function(resp) {
      _this.jobs = resp.data.data
    })
  },
  methods: {
    toEmployeeInfo: function(jobId) {
      // console.log(jobId)
      this.$router.push({ name: 'EmployeeInfo', params: { jobId: jobId }})
    }
  }
}
</script>

<style scoped>

</style>
